<template>
    <div>
        <h2>会员显示列表</h2>
        <a href="/add">添加会员</a>
        <br>
        <input type="text" placeholder="姓名" v-model="page.name">
        <select v-model="page.age">
            <option value="0">请选择性别</option>
            <option value="1">女</option>
            <option value="2">男</option>
        </select>
        <select v-model="page.level">
            <option value="0">请选择会员等级</option>
            <option value="1">青铜会员</option>
            <option value="2">白银会员</option>
        </select>
        <input type="button" value="查询" @click="chax">
          <table class="table">
              <thead>
                     <tr>
                        <td>
                            <input type="checkbox" v-model="state" @change="sellectid">
                        </td>
                        <td>会员编号</td>
                        <td>会员名称</td>
                        <td>密码</td>
                        <td>性别</td>
                        <td>图片</td>
                        <td>会员等级id</td> 
                        <td>编辑</td>
                     </tr>
              </thead>
              <tbody>
                <tr v-for="e in data">
                    <td>
                        <input type="checkbox" :value="e.id" v-model="states">
                    </td>
                    <td>{{ e.id }}</td>
                        <td>{{ e.memberName }}</td>
                        <td>{{ e.password }}</td>
                        <td>{{ e.age }}</td>
                        <td>
                            <img :src="'https://localhost:7079/'+e.imgUrl" style="height: 100px; width: 100px;">
                        </td>
                        <td>{{ e.name }}</td> 
                        <td>
                            <input type="button" value="编辑" @click="update(e.id)">
                        </td>
                     </tr>
              </tbody>
          </table>
          总共{{pageinfo.count}}条,每页{{page.pageSize}}条,总共{{pageinfo.listcount}}页数,当前第{{page.pageIndex}}页
          <input type="button" value="首页" @click="getpage(1)">
       <input type="button" value="上一页" @click="getpage(2)"> 

       <input v-for="i in pageinfo.listcount" type="button" :value="i" @click="pageid(i)">

       <input type="button" value="下一页" @click="getpage(3)">
       <input type="button" value="尾页" @click="getpage(4)">

       <input type="number" v-model="page.pageIndex"> <input type="button" value="跳转" @click="shuru">
       <select v-model="page.pageSize" @click="yrl">
        <option value="2">2</option>
        <option value="5">5</option>
        <option value="8">8</option>
       </select>
       <input type="button" value="逻辑删除" @click="deleteinfo">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router' 
import {useUserStore} from '../../stores/userinfo'
onMounted(()=>{
    Getuser();
    show();
})

const router=useRouter();

const user =useUserStore();
//没登录
const Getuser=()=>{
    if(user.userinfo.name=="")
{
  alert("你还没登录,请登录")
  router.push({path:"/"})
} 
}

//编辑跳转
const update=(val:any)=>{
    router.push({path:"/up",query:{id:val}})
}

//保存全选全取消状态
const state = ref(false);
//保存多个选中编号
const states=ref([]);

//全选反选
const sellectid=()=>{
    if(state.value){
        data.value.forEach((e)=>{
            states.value.push(e.id);
        })
    }
    else{
        states.value=[];
    }
}
//逻辑删除
const deleteinfo=()=>{
  axios.get("https://localhost:7079/api/Member/LuoDelete",{params:{idlist:states.value.toString()}}).then(res=>{
      if(res.data>0)
      {
          alert('逻辑删除成功');
          state.value=false;
          show();
      }
      else{
        alert("逻辑删除失败")
      }
  })
}
//分页
const getpage=(val:any)=>{
    if(val==1) 
   {
    page.value.pageIndex=1;
    show();
   }
   if(val==2) 
   {
      if(page.value.pageIndex>1)
      {
            page.value.pageIndex-=1
            show();
      }
   }
   if(val==3) 
   {
        if(page.value.pageIndex<pageinfo.value.listcount)
      {
            page.value.pageIndex+=1
            show();
      }
   }
   if(val==4) 
   {
    page.value.pageIndex=pageinfo.value.listcount;
    show();
   }
    
} 
//查询
const chax=(val:any)=>{ 
    show();
}
//点击页
const pageid=(val:any)=>{
    page.value.pageIndex=val; 
    show();
}
//输入页
const shuru=()=>{
    show();
}
//也容量
const yrl=()=>{
    show();
}

const data =ref([{
      "name": "",
      "id": 0,
      "memberName": "",
      "age": 0,
      "password": "",
      "imgUrl": "",
      "memberLevelid": 0
    }])

const page = ref({
    pageIndex:1,
    pageSize:2,
    name:"",
    level:0,
    age:0,
})
const pageinfo =ref({
   count :0,
   listcount:0,
})

const show =()=>{
    axios.get("https://localhost:7079/api/Member/ShowMember",{params:page.value}).then(res=>{
        data.value=res.data.listCount
        
         // 总条数
         pageinfo.value.count=res.data.count
        //总页数
        pageinfo.value.listcount=Math.ceil(pageinfo.value.count/page.value.pageSize);
        
    })
}

</script>

<style scoped>

</style>